<template>
  <div class="container">
    <div class="app-container">
      <el-table
        :data="inventoryData"
        lazy
        stripe
        style="width: 100%"
        class="table"
        v-loading="loading"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column
          prop="id"
          label="编号"
          header-align="center"
          align="center"
        />
        <el-table-column label="农产品名称" align="center" sortable width="260">
          <template slot-scope="scope">
            <div class="block">
              <span>{{ scope.row.productName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="农产品图片" align="center" width="160">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.imageUrl"
              fit="cover"
              :preview-src-list="[scope.row.imageUrl]"
            >
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="库存量" align="center" width="260">
          <template slot-scope="scope">
            <div class="block">
              <span>{{ scope.row.stock }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="更新时间" align="center" width="320">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{
              leaveTime(scope.row.updateTime)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="210" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)"
              >详情</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { getInventory } from "@/api/inventory";
import moment from "moment";
export default {
  name: "Inventory",
  created() {
    this.getInventory();
  },
  data() {
    return {
      inventoryData: [],
      loading: true,
    };
  },
  methods: {
    async getInventory() {
      this.inventoryData = await getInventory();
      this.loading = false;
    },
    // 转换日期格式
    leaveTime(value) {
      return moment(value).format("YYYY-MM-DD HH:mm");
    },
  },
};
</script>
